<template>
  <div>
    <el-upload
      size="mini"
      ref="ref_uploadImg"
      :action="uploading_img.api_uploading_img_url"
      :headers="uploading_img.headers"
      :limit="limit"
      :file-list="formattedFileList"
      :multiple="multiple"
      list-type="picture-card"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :on-error="handleError"
      :on-change="handleChange"
    >
      <i class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

<script>
import {
  getUploadingImgUrl,
  getUploadingVideoUrl,
  getResourceUrl,
} from "@/api/uploading";
import { getToken } from "@/utils/auth";
export default {
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    limit: {
      type: Number,
      default: 1,
    },
    fileList: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      uploading_img: {
        headers: {},
        api_uploading_img_url: "",
        api_uploading_video_url: "",
        dialogImageUrl: "",
        dialogImgVisible: false,
        disabled: false,
      },
    };
  },
  computed: {
    formattedFileList() {
      //   console.log("formattedFileList", this.fileList);
      var data = this.fileList
        ? this.fileList.split(",").map((file) => ({
            name: file.trim(),
            response: {
              code: 1,
              data: {
                path: file.trim(),
              },
            },
            url: getResourceUrl(file.trim()), // 假设每个文件名也是其 URL
          }))
        : [];
      return data;
    },
  },

  created() {
    this.uploading_img.api_uploading_img_url = getUploadingImgUrl();
    this.uploading_img.api_uploading_video_url = getUploadingVideoUrl();
    this.uploading_img.headers = {
      token: getToken(),
    };
  },
  methods: {
    openNewPage(url) {
      // 在这里指定要打开的新页面 URL
      window.open(url, "_blank"); // 使用 _blank 打开新标签页
    },
    // 上传成功
    handleSuccess(response, file, fileList) {
      console.log([response, file, fileList], "上传成功");
      // console.log("上传成功图片", fileList);
      // const _this = this;
    },
    // 上传失败
    handleError(response, file, fileList) {
      console.log([response, file, fileList], "上传失败");
    },
    // 上传变更的监听
    handleChange(file, fileList) {
      console.log([file, fileList], "上传变更");
      const ret = response.response;
      if (ret["code"] == 1) {
        var files = this.handleUploadingImgFileList(fileList);
        this.$emit("upload-success", files); // 向父组件传递图片 URL
      }
    },
    // 删除图片
    handleRemove(file, fileList) {
      console.log("删除图片", fileList);
      var files = this.handleUploadingImgFileList(fileList);
      this.$emit("upload-success", files); // 向父组件传递图片 URL
    },
    // 处理上传图片列表
    handleUploadingImgFileList(fileList) {
      var files = [];
      for (var f = 0; f < fileList.length; f++) {
        var response = fileList[f]["response"];
        if (response["code"] == 1) {
          files.push(response["data"]["path"]);
        }
      }
      return files;
    },
  },
};
</script>




  <style scoped>
.my-component {
  background-color: #f3f3f3;
  padding: 20px;
}
</style>
